<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
    {{--<link rel="stylesheet" href="/web/design/css/layui.css">--}}
    <script src="/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="/">首页</a>
                <a>
                    <cite>商品分类</cite></a>
                <a>
                    <cite>导航元素</cite></a>
            </span>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        @csrf
                        <div class="layui-input-inline layui-show-xs-block">
                            <input class="layui-input" placeholder="输入顶级分类名" name="name"></div>
                        <div class="layui-input-inline layui-show-xs-block">
                            <button class="layui-btn"  lay-submit="" lay-filter="addTop"><i class="layui-icon"></i>增加一级分类</button>
                        </div>
                    </form>
                    <hr>
                </div>
                <div class="layui-card-header">
                    <button class="layui-btn layui-btn-primary layui-btn-xs layui-btn-xstree" onclick="reload()">
                        <i class="layui-icon">&#xe669;</i>刷新</button>
                    <button class="layui-btn layui-btn-danger" onclick="getCheckData()">
                        <i class="layui-icon"></i>批量删除</button>
                    <button class="layui-btn layui-btn-primary layui-btn-xs layui-btn-xstree" onclick="openAll()">
                        <i class="layui-icon">&#xe60f;</i>展开或折叠全部</button>
                </div>
                <div class="layui-card-body ">
                    <div class="dBody">
                        <table class="layui-hidden" id="treeTable" lay-filter="treeTable"></table>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<script>
    var editObj=null,ptable=null,treeGrid=null,tableId='treeTable',layer=null;
    layui.config({
        base: '/web/design/extend/'
    }).extend({
        treeGrid:'treeGrid'
    }).use(['jquery','treeGrid','layer','form'], function(){
        var $=layui.jquery;
            treeGrid = layui.treeGrid;
            layer=layui.layer;
            form = layui.form;
        ptable=treeGrid.render({
            id:tableId
            ,elem: '#'+tableId
            // ,url:'/web/json/treeData.json'
            ,url:"{{ route('cateList') }}"
            ,cellMinWidth: 100
            ,idField:'id'//必須字段
            ,treeId:'id'//树形id字段名称
            ,treeUpId:'parent_id'//树形父id字段名称
            ,treeShowName:'name'//以树形式显示的字段
            ,heightRemove:[".dHead",10]//不计算的高度,表格设定的是固定高度，此项不生效
            ,height:'100%'
            ,isFilter:false
            ,iconOpen:true//是否显示图标【默认显示】
            ,isOpenDefault:false//节点默认是展开还是折叠【默认展开】
            ,loading:true
            ,method:'get'
            // ,isPage:true
            ,cols: [[
                {type:'checkbox'}
                ,{field:'id', title: 'id'}
                ,{field:'name', width:200, title: '水果名称',edit:'text'}
                ,{field:'sort', title: '排序',edit:'text'}
                ,{field:'level', title: '层级'}
                ,{field:'parent_id', title: 'pid'}
                ,{width:250,title: '操作', align:'left'/*toolbar: '#barDemo'*/
                    ,templet: function(d){
                        var addBtn='<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="addSon">添加子分类</a>';
                        var delBtn='<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
                        return addBtn+delBtn;
                    }
                }
            ]]
        });

        treeGrid.on('tool('+tableId+')',function (obj) {
            if(obj.event === 'del'){//删除行
                del(obj);
            }else if(obj.event==="addSon"){//添加行
                addSon(obj);
            }
        });

        treeGrid.on('edit('+tableId+')',function (obj) {

            $.ajax({
                url: "{{ route('cateSave') }}",
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: obj.data,
                success:function (res) {
                    layer.msg(res.msg,{icon:res.code},function () {
                        if (res.code == 1){
                            reload();
                        }
                    })
                }
            });

        });

        form.on('submit(addTop)', function(data){
            $.post("{{ route('addTop') }}",data.field,function (res) {
                layer.msg(res.msg,{icon:res.code},function () {
                    if (res.code == 1){
                        reload();
                    }
                })
            });
            return false;
        });

    });

    // 删除
    function del(obj) {
        layer.confirm("你确定删除数据吗？如果存在下级节点则无法删除！", {icon: 3, title:'提示'},
            function(index){//确定回调
                $.ajax({
                    url: "{{ route('cateDel') }}",
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: obj.data,
                    success:function (res) {
                        layer.msg(res.msg,{icon:res.code},function () {
                            if (res.code == 1) {
                                obj.del();
                                layer.close(index);
                            }
                        });

                    }
                });
            },function (index) {//取消回调
                layer.close(index);
            }
        );
    }


    //添加
    function addSon(pObj) {
        var param=pObj.data;

        layer.prompt({
            title: '请输入子分类的名称',
            maxlength: 60,
        }, function(value, index, elem){
            param.sonname=value;//得到value
            $.ajax({
                url: "{{ route('addSon') }}",
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: param,
                success:function (res) {
                    layer.msg(res.msg,{icon:res.code},function () {
                        if (res.code == 1) {
                            treeGrid.addRow(tableId,pdata?pdata[treeGrid.config.indexName]+1:0,param);
                            layer.close(index);
                        }
                    });
                }
            });
        });

    }



    function openAll() {
        var treedata=treeGrid.getDataTreeList(tableId);
        treeGrid.treeOpenAll(tableId,!treedata[0][treeGrid.config.cols.isOpen]);
    }

    function getCheckData() {
        var checkStatus = treeGrid.checkStatus(tableId)
            ,data = checkStatus.data;
        layer.confirm("你确定要删除这"+data.length+"条数据吗？", {icon: 3, title:'提示'},
            function(index){//确定回调
                $.ajax({
                    url: "{{ route('cateDel') }}",
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: data,
                    success:function (res) {
                        layer.msg(res.msg,{icon:res.code},function () {
                            if (res.code == 1) {
                                obj.del();
                                layer.close(index);
                            }
                        });

                    }
                });
            },function (index) {//取消回调
                layer.close(index);
            }
        );

    }

    function reload() {
        // location.reload()
        treeGrid.reload(tableId,{
            page:{
                curr:1
            }
        });
    }
    function query() {
        treeGrid.query(tableId,{
            where:{
                name:'sdfsdfsdf'
            }
        });
    }

</script>
</body>
</html>
